<template> 
    <el-card class="form-container" shadow="never">
        <el-form :model="sysStore" :rules="rules" ref="SysStoreFrom" label-width="150px">
			<el-form-item label="科技馆名称：" prop="name">
				<el-input v-model="sysStore.name" style="width: 370px;"/>
			</el-form-item>
			<el-form-item label="类型：" prop="type">
			  <el-select 
			    v-model="sysStore.type"
			    @change="handleBrandChange"
			    placeholder="请选择类型"
				style="width: 370px;">
			    <el-option label="自营" :value="1"></el-option>
				<el-option label="入驻" :value="2"></el-option>
			  </el-select>
			</el-form-item>
			<el-form-item label="负责人：" prop="contactName">
				<el-input v-model="sysStore.contactName" style="width: 370px;"/>
			</el-form-item>
			<el-form-item label="联系电话：" prop="supportPhone">
				<el-input v-model="sysStore.supportPhone" style="width: 370px;"/>
			</el-form-item>
			<el-form-item label="合作方等级：" prop="hit">
			  <el-select
			    v-model="sysStore.hit"
			    @change="handleBrandChange"
			    placeholder="请选择级别"
				style="width: 370px;">
			    <el-option
			      v-for="item in levelList"
			      :key="item.id"
			      :label="item.name"
			      :value="item.id">
			    </el-option>
			  </el-select>
			</el-form-item>
		    <el-form-item label="身份证照：" prop="servicePhone">
				<single-upload v-model="sysStore.servicePhone"></single-upload>
			</el-form-item>
		    <el-form-item label=" 营业执照：" prop="supportName">
				<single-upload v-model="sysStore.supportName"></single-upload>
			</el-form-item>
			<el-form-item label="省份：" prop="addressProvince">
				<el-input v-model="sysStore.addressProvince" style="width: 370px;"/>
			</el-form-item>
			<el-form-item label="城市：" prop="addressCity">
				<el-input v-model="sysStore.addressCity" style="width: 370px;"/>
			</el-form-item>
			<el-form-item label="区域：" prop="addressArea">
				<el-input v-model="sysStore.addressArea" style="width: 370px;"/>
			</el-form-item>
			<el-form-item label="地址详情：" prop="addressDetail">
				<el-input v-model="sysStore.addressDetail" style="width: 370px;"/>
			</el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit('SysStoreFrom')">提交</el-button>
                <el-button v-if="!isEdit" @click="resetForm('SysStoreFrom')">重置</el-button>
            </el-form-item>
        </el-form>
    </el-card>
</template>
<script>
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
import BmLocalSearch from 'vue-baidu-map/components/search/LocalSearch';
import BmCityList from 'vue-baidu-map/components/controls/CityList';
import BmCopyright from 'vue-baidu-map/components/controls/Copyright';
import BmView from 'vue-baidu-map/components/map/MapView';
import {createSysStore, getSysStore, updateSysStore} from '@/api/sys/sysStore'
import SingleUpload from '@/components/Upload/singleUpload'
import {fetchList} from '@/api//sys/sysStoreRank'

const defaultSysStore = {
	name: ''
};
export default {
	name: 'SysStoreDetail',
	components: {SingleUpload,BaiduMap,BmLocalSearch,BmCityList,BmView,BmCopyright},
	props: {
		isEdit: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			sysStore: Object.assign({},defaultSysStore),
			rules: {
				name: [
					{required: true, message: '请输入商户名称', trigger: 'blur'},
					{min: 2, max: 140, message: '长度在 2 到 140 个字符', trigger: 'blur'}
				],
				addressProvince:[
					{required: true, message: '请输入所在省份', trigger: 'blur'},
				],
				addressCity:[
					{required: true, message: '请输入所在城市', trigger: 'blur'},
				],
				// addressArea:[
				// 	{required: true, message: '请输入所在区域', trigger: 'blur'},
				// ],
			},
			levelList:null,
		}
	},
	created() {
		this.getLevelList()
		if (this.isEdit) {
			getSysStore(this.$route.query.id).then(response => {
				this.sysStore = response.data;
			});
		} else {
			this.sysStore = Object.assign({},defaultSysStore);
		}
	},
	filters: {
		formatType(value){
      if (value ===1) {
        return "自营";
      } else if (value === 2) {
        return "入驻";
      }else{
        return ""
      }
    },
	},
	methods: {
		getLevelList(){
			fetchList().then(response => {
			    this.levelList = [];
			 this.levelList = response.data.records;
			  console.log(this.levelList)
			  // for (let i = 0; i < brandList.length; i++) {
			  //   this.levelList.push({label: brandList[i].price+','+brandList[i].name, value: brandList[i].id});
			  // }
			});
		},
		
		changeAfters(e){
			console.log('123')
			console.log(e)
		},
		handleScroll (e) {
			//修复body高度为100%，百度地图鼠标滚轮滚动产生位移问题，以及全景鼠标hover后未显示全景信息问题
			document.body.scrollTop=0
			document.documentElement.scrollTop =0
			},
			syncCenterAndZoom (e) {
			const {lng, lat} = e.target.getCenter()
			this.center.lng = lng
			this.center.lat = lat
			this.zoom = e.target.getZoom()
		},
		onSubmit(formName) {
			this.$refs[formName].validate((valid) => {
			 // this.sysStore.addressLat=this.center.lat;
			 //   this.sysStore.addressLng=this.center.lng;
				if(valid) {
					this.$confirm('是否提交数据', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						if(this.isEdit){
							updateSysStore(this.$route.query.id, this.sysStore).then(response => {
								if(response.code == 200){
									this.$refs[formName].resetFields();
									this.$message({
										message: '修改成功',
										type: 'success',
										duration: 1000
									});
									this.$router.back();
								}else {
									this.$message({
										message: response.msg,
										type: 'error',
										duration: 1000
									});
								}
							});
						}else {
							createSysStore(this.sysStore).then(response => {
								if(response.code == 200){
									this.$refs[formName].resetFields();
									this.sysStore = Object.assign({},defaultSysStore);
									this.$message({
										message: '提交成功',
										type: 'success',
										duration: 1000
									});
									this.$router.back();
								}else {
									this.$message({
										message: response.msg,
										type: 'error',
										duration: 1000
									});
								}
							});
						}
					});
				} else {
					this.$message({
						message: '验证失败',
						type: 'error',
						duration: 1000
					});
					return false;
				}
			});
		},
		resetForm(formName) {
			this.$refs[formName].resetFields();
			this.sysStore = Object.assign({},defaultSysStore);
		}
	}
}
</script>
<style>
  .bm-view {
    width: 100%;
    height: 400px;
  }
</style>


